<template>
    <div class="login_container">
        <div class="login_box">
            <div class="avatar_logo">
                <img src="https://free.img.jpg.ink/imgs/2020/11/21/c59141c275a4e.jpeg" alt="">
            </div>
            <!-- 登录表单区域 -->
           <a-form-model
                ref="formRef"
                :model="form"
                :rules="formRules">
                <a-form-model-item has-feedback prop="username">
                    <a-input v-model="form.username" autocomplete="off" >
                        <a-icon slot="prefix" type="user" style="color:rgba(0,0,0,.25)" />
                    </a-input>
                </a-form-model-item>
                <a-form-model-item has-feedback prop="password">
                    <a-input v-model="form.password" type="password" autocomplete="off" >
                        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                    </a-input>
                </a-form-model-item>
                <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
                    <div class="btn">
                        <a-button type="primary" @click="onSubmit">
                            登录
                        </a-button>
                        <a-button style="margin-left: 10px;" @click="resetForm">
                            重置
                        </a-button>
                    </div>
                </a-form-model-item>
           </a-form-model>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            //表单数据
            form:{
                username:'admin',
                password:'admin'
            },
            //校验规则
            formRules:{
                username:[
                    {required:true,message:'请输入用户名'}
                ],
                password:[
                    {required:true,message:'请输入用密码'}
                ]
            }
        }
    },
    methods:{
        //点击进行登录
      onSubmit(){
        //   console.log(this.$refs);
        this.$refs.formRef.validate( valid => {
            if(!valid) return this.$message.error('输入框校验失败')

            if(this.form.username === 'admin' && this.form.password === 'admin'){
                window.sessionStorage.setItem('token','success')
                this.$router.push('/home')
            }else{
                return this.$message.error('登陆失败')
            }

        })
      },
      //点击重置
      resetForm(){
          this.$refs.formRef.resetFields();
      }
    }
}
</script>

<style lang="less" scoped>
.login_container{
    height:100%;
    background-color: #2b4b6b;
}
.login_box{
    width:450px;
    height: 300px;
    background: #fff;
    border-radius: 3px;
    position: absolute;
    left:50%;
    top:50%;
    transform: translate(-50%,-50%);
    .avatar_logo{
        width:130px;
        height: 130px;
        border:1px solid #eee;
        border-radius: 50%;
        padding: 5px;
        position: absolute;
        left: 50%;
        transform: translate(-50%, -50%);
        background: #fff;
        > img{
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color:#eee;
        }
    }
}
.ant-form{
    position: absolute;
    bottom: 0;
    width: 100%;
    padding:0 20px;
    /*让样式在自己盒子中执行 */
  box-sizing: border-box;
}
.btn{
    display: flex;
    justify-content: flex-end;
}
</style>